$(function () {
    var regularStuChart_datagrid = $("#regularStuChart_datagrid");

    regularStuChart_datagrid.datagrid({
        url: "/regularStu/chart/selectRegularStuChart",
        fit: true,
        fitColumns: true,
        fit: true,
        rownumbers: true,
        columns: [[
            {
                field: "groupByType", title: "分组类型", width: 100, formatter: function (value, row, index) {
                    if (typeof value == "number") {
                        if (value == 1) {
                            return "基础班";
                        } else if (value == 0) {
                            return "大神班";
                        }
                    } else {
                        return value;
                    }
                }
            },
            {field: "totalAllFee", title: "已付总款", width: 100},
            {field: "totalUnPaidFee", title: "未付总款", width: 100},
            {field: "paidFeeCount", title: "已付清人数", width: 100},
        ]],
        toolbar: "#regularStuChart_toolbar",
        singleSelect: true,
        pagination: true
    });

    //获取柱状图表中的数据
    function getColumn(rows, column) {
        var content = new Array;
        for (var index = 0; index < rows.length; index++) {
            content[index] = '' + rows[index][column] + '';
            if (rows[index][column] == 0) {
                content[index] = "基础班";
            } else if (rows[index][column] == 1) {
                content[index] = "大神班";
            }
        }
        return content;
    }

    function content() {
        var value;
        var name;
    }


    //获取饼状图表中的数据 所在行 分组 groupbytype
    function getData(rows, column1, column2) {
        var date = new Array;
        for (var index = 0; index < rows.length; index++) {
            date[index] = new content();
            date[index].value = rows[index][column1];
            if(rows[index][column2] == 1){
                date[index].name = "大神班";
            }else if(rows[index][column2] == 0){
                date[index].name = "基础班";
            }else{
            date[index].name = rows[index][column2];
            }
        }
        return date;
    }

    //1.把方法绑定到一个对象上
    var cmdObj = {
        //高级查询
        search: function () {
            //1.获取查询input里面的值
            var beginDate = $("#beginDate").val();
            var endDate = $("#endDate").val();
            var groupBy = $("#groupBy").val();

            //2.调用datagrid重新加载数据,并且带上查询条件  keyword className beginDate endDate
            regularStuChart_datagrid.datagrid("load", {
                beginDate: beginDate,
                endDate: endDate,
                groupBy: groupBy
            });
        },
        //柱状图表
        barChart: function () {
            $("#barChart_dialog").dialog("setTitle","柱状图表");
            $("#barChart_dialog").dialog("open");
            //初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));
            var rows = regularStuChart_datagrid.datagrid("getRows");

            var option = {
                title: {
                    text: '正式学员报表',
                    subtext: $("#groupBy").combobox("getText"),
                    x: 'center'
                },
                tooltip: {
                    show: true
                },
                legend: {
                    data: ['已付总额', '未付总额','已付清人数'],
                    x: 'left'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: getColumn(rows, 'groupByType')
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        "name": "已付总额",
                        "type": "bar",
                        data: getData(rows, "totalAllFee"),
                    },
                    {
                        "name": "未付总额",
                        "type": "bar",
                        data: getData(rows, "totalUnPaidFee")
                    },
                    {
                        "name": "已付清人数",
                        "type": "bar",
                        data: getData(rows, "paidFeeCount")
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        },
        pieChart: function () {
            $("#pieChart_dialog").dialog("setTitle","饼状图表");
            $("#pieChart_dialog").dialog("open");
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('pie_main'));
            var rows = regularStuChart_datagrid.datagrid("getRows");

            var option = {
                title: {
                    text: '销售报表',
                    subtext: $("#groupBy").combobox("getText"),
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie']
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: getColumn(rows, 'groupByType')
                },
                series: [
                    {
                        name: '已付总额',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],

                        label: {
                            normal: {
                                position: 'inner'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: getData(rows, "totalAllFee", "groupByType"),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '未付总额',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                shadowBlur:3,
                                shadowOffsetX: 2,
                                shadowOffsetY: 2,
                                shadowColor: '#999',
                                padding: [0, 7],
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    abg: {
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0]
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data: getData(rows, "totalUnPaidFee", "groupByType"),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '已付清人数',
                        type: 'pie',
                        radius: ['60%', '75%'],
                        label: {
                            normal: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#eee',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                borderRadius: 4,
                                shadowBlur: 3,
                                shadowOffsetX: 2,
                                shadowOffsetY: 2,
                                shadowColor: '#999',
                                padding: [0, 7],
                                rich: {
                                    a: {
                                        color: '#999',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    abg: {
                                        backgroundColor: '#333',
                                        width: '100%',
                                        align: 'right',
                                        height: 22,
                                        borderRadius: [4, 4, 0, 0]
                                    },
                                    hr: {
                                        borderColor: '#aaa',
                                        width: '100%',
                                        borderWidth: 0.5,
                                        height: 0
                                    },
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#eee',
                                        backgroundColor: '#334455',
                                        padding: [2, 4],
                                        borderRadius: 2
                                    }
                                }
                            }
                        },
                        data: getData(rows, "paidFeeCount", "groupByType"),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    }

    //2.按钮的点击事件通过js来绑定
    $("a[data-cmd]").click(function () {
        var cmd = $(this).data("cmd");
        cmdObj[cmd]();
    });
});
